<template>
  <div>
    <!-- 头部 -->
    <div style="height:2rem"></div>
    <div class="dark-top">
      <a @click="goback" class="page-back"><div></div></a>
      <div class="page-title">
        <font style="vertical-align: inherit;">忘记密码</font>
      </div>
    </div>
    <!-- 内容 -->
    <div class="dark-body">
      <div class="login-phone">
        <label for="male"><span></span></label>
        <input type="number" ref="male" id="male" placeholder="手机号码" />
      </div>
      <div class="login-code">
        <label for="code"><span></span></label>
        <input type="number" ref="code" id="code" placeholder="验证码" />
        <div
          :class="isDisabled ? 'none-code' : 'click-code'"
          @click="getCode"
          :disabled="isDisabled"
        >
          {{ buttonName }}
        </div>
      </div>
      <div class="login-password">
        <label for="pass"><span class="pass-img"></span></label>
        <input type="password" ref="pass" id="pass" placeholder="密码" />
        <span :class="loginPass" @click="closePass(loginPass)"></span>
      </div>
      <!-- 修改按钮 -->
      <div class="login-button" @click="getRegister">确认修改</div>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      loginPass: "close-pass",
      buttonName: "获取验证码",
      isDisabled: false,
      time: 60
    };
  },
  methods: {
    closePass(val) {
      if (val == "close-pass") {
        this.loginPass = "open-pass";
        document.getElementById("pass").setAttribute("type", "text");
      }
      if (val == "open-pass") {
        this.loginPass = "close-pass";
        document.getElementById("pass").setAttribute("type", "password");
      }
    },
    goback() {
      this.$router.go(-1);
    },
    getCode() {
      var phone = this.$refs.male.value;
      if (phone == "" || phone == null) {
        Toast("申请手机号不能为空！");
        return false;
      }
      let me = this;
      setTimeout(function() {
        me.isDisabled = true;
      }, 1000);
      let interval = window.setInterval(function() {
        me.buttonName = me.time + "秒后重新发送";
        --me.time;
        if (me.time < 0) {
          me.buttonName = "重新发送";
          me.time = 10;
          me.isDisabled = false;
          window.clearInterval(interval);
        }
      }, 1000);

      this.$axios
        .post("/api/index/sendSms", { mobile: phone })
        .then(kun => {
          console.log(kun);
          Toast(kun.msg);
          if (kun.code == 201) {
            window.clearInterval(interval);
            setTimeout(function() {
              me.isDisabled = false;
            }, 1000);
          }
        })
        .catch(function(error) {
          console.log("报错：" + error);
        });
    },
    getRegister() {
      var phone = this.$refs.male.value;
      var password = this.$refs.pass.value;
      var code = this.$refs.code.value;
      let me = this;
      this.$axios
        .post("/api/index/forget_password", {
          mobile: phone,
          code: code,
          password: password
        })
        .then(function(kun) {
          Toast(kun.msg);
          if (kun.code == 200) {
            //到登录页
            me.$router.push({
              name: "Login"
            });
          }
        })
        .catch(function(error) {
          console.log("报错：" + error);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
/* 头部 */
.dark-top {
  width: 100%;
  height: 2.75rem;
  color: #1a1a1a;
  font-size: 1.125rem;
  position: relative;

  .page-back {
    width: 0.5rem;
    height: 0.875rem;
    text-decoration: none;
    color: #1a1a1a;
    display: inline-block;
    position: absolute;
    left: 0.875rem;
    top: 0.9375rem;

    :first-child {
      width: 100%;
      height: 100%;
      background-image: url(../../assets/login/return.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      overflow: hidden;
    }
  }

  .page-title {
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: "";
    -ms-transform: translateX(-50%) translateY(-50%); /* IE 9 */
    -moz-transform: translateX(-50%) translateY(-50%); /* Firefox */
    -webkit-transform: translateX(-50%) translateY(-50%); /* Safari 和 Chrome */
    -o-transform: translateX(-50%) translateY(-50%); /* Opera */
  }
}
//内容
.dark-body {
  width: 18.75rem;
  margin: 3.375rem auto 0;

  //手机号
  .login-phone {
    height: 2.1875rem;
    border-bottom: 1px solid #d6d6d6;

    span {
      width: 1.1875rem;
      height: 1.1875rem;
      display: block;
      float: left;
      background-image: url(../../assets/login/phone.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      overflow: hidden;
    }
    input {
      float: left;
      width: 13.75rem;
      margin-left: 0.8125rem;
      font-size: 1.125rem;
      color: #191919;
      border: 0;
      outline: none;
      cursor: pointer;
    }
  }
  //验证码
  .login-code {
    height: 3.4375rem;
    border-bottom: 1px solid #d6d6d6;

    span {
      margin-top: 1.125rem;
      width: 1.1875rem;
      height: 1.1875rem;
      display: inline-block;
      float: left;
      background-image: url(../../assets/login/code.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      overflow: hidden;
    }
    input {
      float: left;
      width: 8.75rem;
      margin-left: 0.8125rem;
      font-size: 1.125rem;
      margin-top: 1rem;
      color: #191919;
      border: 0;
      outline: none;
      cursor: pointer;
    }
    .none-code {
      margin-top: 0.75rem;
      border: 1px solid #999999;
      width: 6.875rem;
      height: 1.875rem;
      float: right;
      border-radius: 0.9375rem;
      font-size: 0.875rem;
      color: #999999;
      text-align: center;
      line-height: 1.875rem;
    }
    .click-code {
      margin-top: 0.75rem;
      border: 1px solid #ff0000;
      width: 5.625rem;
      height: 1.875rem;
      float: right;
      border-radius: 0.9375rem;
      font-size: 0.875rem;
      color: #ff0000;
      text-align: center;
      line-height: 1.875rem;
    }
  }
  //密码
  .login-password {
    height: 3.4375rem;
    border-bottom: 1px solid #d6d6d6;

    .pass-img {
      margin-top: 1.1875rem;
      width: 1.1875rem;
      height: 1.1875rem;
      display: block;
      float: left;
      background-image: url(../../assets/login/pass.png);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
      overflow: hidden;
    }
    input {
      margin-top: 1.0625rem;
      float: left;
      width: 13.75rem;
      margin-left: 0.8125rem;
      font-size: 1.125rem;
      color: #191919;
      border: 0;
      outline: none;
      cursor: pointer;
    }
    .close-pass {
      margin-top: 1.5625rem;
      width: 1.125rem;
      height: 0.625rem;
      display: block;
      float: left;
      background-image: url(../../assets/login/pass-guan.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
    .open-pass {
      margin-top: 1.5625rem;
      width: 1.125rem;
      height: 0.625rem;
      display: block;
      float: left;
      background-image: url(../../assets/login/pass-open.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }
  }
  // 修改按钮
  .login-button {
    width: 18.75rem;
    height: 3.0625rem;
    clear: both;
    margin: 1.25rem auto 0;
    border-radius: 1.5625rem;
    color: #ffffff;
    font-size: 1.125rem;
    text-align: center;
    line-height: 3.0625rem;

    /* 设置渐变 */
    background: rgb(255, 0, 0); /* Old browsers */
    background: -moz-linear-gradient(
      to right bottom,
      rgb(255, 127, 95) 10%,
      rgb(229, 39, 77) 70%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
      to right bottom,
      rgb(255, 127, 95) 10%,
      rgb(229, 39, 77) 70%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
      to right bottom,
      rgb(255, 127, 95) 30%,
      rgb(229, 39, 77) 80%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
  }
}
</style>
